<template>
  <div>
      <el-row>
        <el-col :span="2" :offset="1"><el-button type="primary" plain @click="showUp()">添加商品</el-button></el-col>
      </el-row>
      <hr >
      <shoplist :shopdata="shopdata"></shoplist>
      <!-- 分页-->
      <div class="block" @click="showAll()">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="8"
            :page-sizes="[8]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="maxpage">
          </el-pagination>
        </div>

        <!-- 弹窗-->
        <el-dialog title="商品维护" :visible.sync="dialogFormVisible" :append-to-body="true">
          <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
          <el-form>
            <el-form-item label="商品名" :label-width="formLabelWidth">
              <el-input v-model="shop.shopname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
              <el-input v-model="shop.shopprice" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品类别" :label-width="formLabelWidth">
              <el-select v-model="shop.shoptypeid" clearable placeholder="请选择" style="width: 100%;">
                   <el-option
                        v-for="item in shoptypedata"
                        :key="item.shoptypeid"
                        :label="item.shoptypename"
                        :value="item.shoptypeid">
                      </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品图片" :label-width="formLabelWidth">
              <el-input v-model="shop.shopimg" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品介绍" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="shop.shopmessage" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="primary" @click="add">确 定</el-button>
          </div>
        </el-dialog>

  </div>
</template>

<script>
  var _this;
  import shoplist from '../components/shop/shopList.vue'
    export default {
      created (){
        _this=this;//记录this--【当前组件对象】
        _this.showAll();
        _this.countpage();
        _this.show();
      },
      components:{
      	shoplist
      },
      methods: {
        add(){
          var shopname=_this.$axios.post("/shop/checkname",{"shopname":this.shop.shopname});
          _this.$axios.all([shopname])
          .then(
            _this.$axios.spread(function(param){
              if(param.data=="error"){
                alert("商品名不能重复");
              }
            })
            )

            _this.$axios.post(
              "/shop/insert",
              {
                "shopname":this.shop.shopname,
                "shopprice":this.shop.shopprice,
                "shoptypename":this.shop.shoptypename,
                "shopimg":this.shop.shopimg,
                "shopmessage":this.shop.shopmessage,
                "shoptypeid":this.shop.shoptypeid
              }
            )
            .then(function(param){
              _this.showAll();
            })
            .catch(function(err) {
            	console.log(err)
            });

          this.shop.shopname="",
          this.shop.shopprice="",
          this.shop.shoptypid="",
          this.shop.shopimg="",
          this.shop.shopmessage=""

          this.dialogFormVisible = false;
        },
        cancel() {
          this.shop.shopname="",
          this.shop.shopprice="",
          this.shop.shoptypid="",
          this.shop.shopimg="",
          this.shop.shopmessage=""
          // 取消的时候直接设置对话框不可见即可
          this.dialogFormVisible = false;
        },
        showUp() {
          //   设置点击按钮之后进行显示对话框
          this.dialogFormVisible = true;
        },
        show(){
          _this.$axios.post(
            "/shoptype/all",
            {}
          )
          .then(function(param){
            _this.shoptypedata=param.data
          })
          .catch(function(err){
            console.log(err);
          })
        },
        showAll(){
        	//进入后台查--->axios
        	_this.$axios.post(
        	   "/shop/get?page="+this.currentPage,
        	   {}
             //console.log(this.currentPage)
        	)
        	.then(function(param){
        		console.log(param)
        		_this.shopdata=param.data
        	})
        	.catch(function(err){
        		console.log(err)
        	})
        },
        countpage(){
          _this.$axios.post(
            "/shop/count",
            {}
          )
          .then(function(param){
            _this.maxpage=param.data
            console.log(_this.maxpage)
          })
          .catch(function(err){
            console.log(err)
          })
        },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        }
      },
     data() {
           return {
             shopdata: [],
             shoptypedata:[],
             currentPage: 1,
             maxpage: 1,
             dialogFormVisible: false,
             formLabelWidth: "100px",
             shop:{
               shopid:"",
               shopname:"",
               shopprice:"",
               shoptypename:"",
               shopimg:"",
               shopmessage:"",
               shoptypeid:""
             }
             }
           }
         }

</script>
<style>

</style>
